The present invention relates to web page authoring. In particular, the present invention relates to object (tag) selection in web page authoring.
Web pages are written in tag-based markup languages (HTML, XML, JSP, etc.). In web page editing, editing operations such as insertion and deletion of tags and setting of tag properties are basically performed by selecting a tag to be edited. Many tools provide editing screens in which display artifacts (that is, text or images) defined by tags are visualized as those artifacts would appear on a browser screen. Such editing screens, often referred to as WYSIWYG editing screens, can make it easier for a web programmer to be certain the user's browser will display exactly what the programmer wants it to display.
However, one drawback of WYSIWYG editing is that numerous non-visible tags are typically associated with a single display artifact. When a significant number of display artifacts appear on the screen at the same time, it can be difficult to select a particular tag to be edited.
For example, even for the simple editing screen illustrated in FIG. 1, a corresponding HTML source file has a nested multi-tag structure illustrated in FIG. 2. Simply selecting a display artifact that appears on the editing screen may not make it possible to select a particular tag related to that artifact in the HTML source file. To address this, a conventional web page authoring tool can have a special user interface (UI) in which HTML tags are displayed in a hierarchical manner. However, this UI has a normal tree structure that does not reflect the layout of a WYSIWYG editing screen.
If the source code illustrated in FIG. 2 is directly displayed, individual tags may be easily selected. However, the source code listing does not make it easy to visualize the screen that will actually be rendered when the source code is executed. Thus, it may be difficult to recognize where an area corresponding to a particular tag in the source code listing is located on an actual web page by simply viewing the source code listing.
According to one known technique, icons corresponding to open/close of a tag are displayed on an editing screen with a view to increasing convenience in tag selection. However, this technique reduces the WYSIWYG effect for the entire page.
In general, tag selection has conventionally been performed at the expense of the WYSIWYG effect for a web page editing screen.